import React from 'react';
import { Modal, Descriptions, Tag, Typography, Space, Divider } from 'antd';
import { CloudDownloadOutlined, StarOutlined, GithubOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

export interface ModelDetailProps {
  visible: boolean;
  onClose: () => void;
  model: any;
  isLocalModel: boolean;
}

const ModelDetailModal: React.FC<ModelDetailProps> = ({
  visible,
  onClose,
  model,
  isLocalModel
}) => {
  if (!model) return null;

  return (
    <Modal
      title={<Title level={4}>{model.name}</Title>}
      open={visible}
      onCancel={onClose}
      footer={null}
      width={700}
    >
      {isLocalModel ? (
        // 本地模型详情
        <Descriptions bordered column={1}>
          <Descriptions.Item label="模型名称">{model.name}</Descriptions.Item>
          <Descriptions.Item label="类型">{model.type}</Descriptions.Item>
          <Descriptions.Item label="大小">{model.size}</Descriptions.Item>
          <Descriptions.Item label="安装路径">/models/{model.name.toLowerCase().replace(/\s/g, '-')}</Descriptions.Item>
          <Descriptions.Item label="最后使用时间">{model.lastUsed}</Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color="green">{model.status}</Tag>
          </Descriptions.Item>
          <Descriptions.Item label="使用统计">
            <Space direction="vertical">
              <Text>总使用次数: 42次</Text>
              <Text>本月使用: 15次</Text>
              <Text>平均处理时间: 2.3秒/张图</Text>
            </Space>
          </Descriptions.Item>
        </Descriptions>
      ) : (
        // 可下载模型详情
        <>
          <Descriptions bordered column={1}>
            <Descriptions.Item label="模型名称">{model.name}</Descriptions.Item>
            <Descriptions.Item label="描述">{model.description}</Descriptions.Item>
            <Descriptions.Item label="标签">
              {model.tags?.map((tag: string) => (
                <Tag color="blue" key={tag}>
                  {tag}
                </Tag>
              ))}
            </Descriptions.Item>
            <Descriptions.Item label="星标数">
              <Space>
                <StarOutlined />
                {model.stars}
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label="仓库地址">
              <Space>
                <GithubOutlined />
                <a href={model.url} target="_blank" rel="noopener noreferrer">
                  {model.url}
                </a>
              </Space>
            </Descriptions.Item>
          </Descriptions>
          
          <Divider />
          
          <Space direction="vertical" style={{ width: '100%' }}>
            <Title level={5}>安装说明</Title>
            <Paragraph>
              1. 点击"下载"按钮开始下载模型
            </Paragraph>
            <Paragraph>
              2. 下载完成后，系统将自动安装并配置模型
            </Paragraph>
            <Paragraph>
              3. 安装完成后，可在"本地已安装模型"选项卡中查看和使用
            </Paragraph>
          </Space>
        </>
      )}
    </Modal>
  );
};

export default ModelDetailModal; 